<template>
	<view class="zxc_content">
		<!-- <view class="ilf">
			<view class="ilf_left">选择手牌</view>
			<view class="olf" @click="show=true">
				<input class="ilf_right" type="text" placeholder="请选择手牌" placeholder-style="font-size:26upx" disabled
					v-model="lockPlateNum"  style="pointer-events: none;"/>
				<u-picker :show="show" :columns="sendLockPlateList" keyName="lockPlateNum" @cancel="closeshow"
					@confirm="changeshow"></u-picker>
				<image src="../../static/images/right.png" mode="widthFix" style="width:15upx;"></image>
			</view>
		</view> -->
		<!-- <u-navbar title="项目" bgColor="#07c160" :placeholder="true" :border="false" leftIcon=" " :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar> -->
		<DefineCateList :data="data" @cateItemClick="itemClick"></DefineCateList>
		<view class="shop_bt_view">
			<view class="shop_bt">
				<view class="shop_bt_left" @click="opencart" style="display: flex;align-items: center;">
					￥{{zongmoney}} <text style="font-size:28upx;color:rgb(209, 124, 47);">预览</text>
				</view>
				<view class="shop_bt_right" @click="submit">
					买单
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<u-popup :show="cart" @close="closecart" mode="bottom" :round="10" :closeable="true">
			<view style="text-align: center;padding:20upx 0;font-weight: 700;">下单预览</view>
			<view class="list" style="max-height:700upx;overflow-y: auto;padding:0;width: 90%;">
				<!-- 数据为空 -->
				<u-empty style="padding:100upx 0;" v-if="cartList.length<=0"></u-empty>
				<view class="list_box" v-for="(item,index) in cartList" :key="index">
					<!-- <view class="label">{{item.lockPlateNum}}手牌</view> -->
					<view class="list_sm" v-for="(items,indexs) in item.sendLockItemInfoList" :key="indexs">
						<image :src="items.itemImage ? items.itemImage :'../../static/images/anmo.png'"
							class="shop_img"></image>
						<view class="list_right"
							style="display: flex;justify-content: space-between;align-items: center;">
							<view>
								<view class="list_tit">{{items.typeName}}</view>
								<view class="list_text">时长：{{items.timeLength}}分钟</view>
								<view class="list_text">数量：{{items.num}}</view>
								<view class="list_ikd">
									<view class="money">单价：￥{{items.money}}</view>
								</view>
							</view>
							<u-number-box v-model="items.num" @change="(event)=>changeCardNum(event,index, indexs)"
								:min="0" :max="100" style="justify-content: center;"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import DefineCateList from "./components/defineCateList.vue"
	export default {
		components: {
			DefineCateList
		},
		data() {
			return {
				sendLockPlateList: [],
				data: [],
				seleItem: [],
				seleItemArray: [], //手牌所选商品
				cartList: [], //购物车集合
				cardMap: {}, //购物车数量预存集合
				arr2: [],
				zongmoney: 0,
				lockPlateNum: 0, //默认手牌号
				sendLockPlateId: 0, //，默认手牌id
				cart: false,
				show: false,
				room:'',
				roomId:'',
				
				identity:'',  //技师自己开单的时候有值
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				var obj = {

				}
				uni.showLoading({
					title: '请求中'
				})
				this.$get(this.$api.getAddItemClassification, obj,
					(res) => {
						if (res.code == 200) {
							uni.hideLoading()
							let data = res.data
							let sendLockItemInfoList = []
							this.cartList.forEach((item, index) => {
								if (item.sendLockPlateId == this.sendLockPlateId) {
									sendLockItemInfoList = item.sendLockItemInfoList
								}
							})
							data.forEach((item1) => {
								item1.sendLockItemInfoVoList.forEach((item2) => {
									if (sendLockItemInfoList.length == 0) {
										item2.num = 0
									} else {
										sendLockItemInfoList.forEach((item3) => {
											if (item2.itemId == item3.itemId) {
												item2.num = item3.num
											}
										})
									}
								})
							})
							this.data = data
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg ? res.msg : '网络错误',
								icon: 'none'
							})
						}
					},
					(res) => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						})
					}, 1, 0)
			},
			closecart() { //关闭购物车
				this.cart = false;
			},
			opencart() { //打开购物车
				this.cart = true;
			},
			submit() {
				uni.setStorageSync("cardList", this.cartList)
				console.log(this.cartList)
				if(this.cartList.length <= 0) return uni.showToast({title:'请选择项目',icon: 'none'})
				const cartListText = JSON.stringify(this.cartList[0])
				uni.navigateTo({
					url: '/pages/order/sureOrder?cartList='+ cartListText
				})
			},
			itemClick(item) { //更改数量
				this.$nextTick(() => {
					console.log("item", item);
					var arr = JSON.parse(JSON.stringify(this.cartList))
					let lockIndex = -1
					arr.forEach((items, index) => {
						if (items.sendLockPlateId == this.sendLockPlateId) {
							lockIndex = index
						}
					})
					let sendLockItemInfoList = []
					if (lockIndex != -1) {
						sendLockItemInfoList = arr[lockIndex].sendLockItemInfoList
					}
					let itemIndex = -1
					sendLockItemInfoList.forEach((items, index) => {
						if (items.itemId == item.itemId) {
							itemIndex = index
						}
					})
					if (itemIndex != -1) {
						sendLockItemInfoList[itemIndex].num = item.num
					} else {
						sendLockItemInfoList.push(item)
					}
					let data = {
						lockPlateNum: this.lockPlateNum,
						sendLockPlateId: this.sendLockPlateId,
						room:this.room,
						roomId:this.roomId,
						sendLockItemInfoList: sendLockItemInfoList
					}
					if (lockIndex != -1) {
						arr[lockIndex] = data
					} else {
						arr.push(data)
					}
					this.cartList = arr
					this.count_total_money()
				})
			},
			count_total_money() {
				let sum = 0
				let delList = []
				this.cartList.forEach((item, index) => {
					item.sendLockItemInfoList.forEach((items, indexs) => {
						sum += items.num * items.money
						if (items.num < 1) {
							delList.push({
								index1: index,
								index2: indexs
							})
						}
					})
				})
				delList.forEach((item)=>{
					this.cartList[item.index1].sendLockItemInfoList.splice(item.index2,1)
				})
				this.cartList.forEach((item,index)=>{
					if(item.sendLockItemInfoList.length==0){
						this.cartList.splice(index,1)
					}
				})
				this.zongmoney = sum
			},
			changeCardNum(event, index, indexs) {
				let goods = this.cartList[index].sendLockItemInfoList[indexs]
				let cartList = JSON.parse(JSON.stringify(this.cartList))
				this.data.forEach((item, index1) => {
					item.sendLockItemInfoVoList.forEach((items, index2) => {
						if (items.itemId == goods.itemId) {
							items.num = event.value
						}
					})
				})
				this.data = JSON.parse(JSON.stringify(this.data))
				this.$nextTick(()=>{
					this.count_total_money()
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.label {
		font-weight: 700;
		margin-bottom: 20upx;
	}

	.ilf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
		padding: 0 5%;
		width: 90%;
		margin: 0 auto;
		font-size: 26upx;
		background-color: #fff;
	}

	.ilf input {
		width: 100%;
		font-size: 33upx;
		font-weight: 700;
	}

	.ilf_right {
		width: 70%;
	}

	.olf {
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list {
		width: 83%;
		padding: 30upx 30upx 10upx 30upx;
		margin: 30upx auto;
		background-color: #fff;
		border-radius: 10upx;
	}

	.list_sm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.shop_img {
		width: 200upx;
		height: 200upx;
		object-fit: cover;
		border-radius: 10upx;
	}

	.list_right {
		width: 63%;
	}

	.list_tit {
		font-weight: 700;
		font-size: 28upx;
	}

	.list_text {
		color: #999;
		margin-top: 20upx;
		font-size: 25upx;
	}

	.list_ikd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.money {
		font-weight: 700;
		color: #ff6c00;
	}

	.shop_bt_view {
		margin: 30upx 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80upx;
		left: 0;
	}

	.shop_bt {
		width: 90%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 100upx;
		background-color: #333;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_bt_left {
		width: 70%;
		height: 100%;
		font-size: 35upx;
		text-indent: 30upx;
	}

	.shop_bt_right {
		width: 30%;
		height: 100%;
		background-color: #07c160;
		border-radius: 0 100upx 100upx 0;
		text-align: center;
	}
</style>